<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>17 - 事件</title>
</head>
<body>
    <input type="button" value="按钮" class="btn">

    <input type="button" value="按钮" class="ary">

    <input type="button" value="按钮" class="res">

    <script>

        // 事件     在网页中, 事件其实就是用户的一个动作 (在程序中, 用户的任何一个动作, 都是一个事件)


        // 事件实现的步骤(给网页中的标签注册事件)
        // 事件的基本组成:
        // ☛  事件源           用户的动作在哪个标签上执行,那么该标签就是事件源 (动作的源头)
        // ☛  事件类型         代表用户使用的是哪个动作
        // ☛  事件处理程序     代表用户执行完动作后的效果  (事件处理程序就是一个函数)





        // A. 标签注册事件                                            addEventListener 注册的事件叫 DOML2 方式
        // 语法:
        // ☛   事件源.addEventListener('事件类型', function(){});


        // B. 给元素通过行内式写法注册事件     (了解)
        // <input type="button" value="按钮"  onclick="alert(123)">


        // C. 通过 on 的方式给标签注册事件     (了解)                  on 方式注册的事件叫  DOML0方式 
        // 语法:
        // ☛   事件源.on事件类型 = function(){}










        // B. 事件类型

        // 1. 鼠标相关的事件类型
        // 点击事件                 click           用户可以点击页面中的任何标签
        // 鼠标进入事件(鼠标悬停)    mouseenter
        // 鼠标离开事件             mouseleave
        // 鼠标双击事件             dblclick


        // 2. 焦点事件          只有输入框才会获取鼠标焦点(输入内容)
        // 获取焦点事件     focus   输入框中有鼠标光标闪烁
        // 失去焦点事件     blur    输入框中没有鼠标光标闪烁


        // 3. 键盘事件          用户通过键盘执行动作        键盘事件一般给输入框注册 或者 给整个页面注册(body)
        // 按下键盘      keydown      当键盘上的按键被用户按下去的时候执行
        // 抬起键盘      keyup        当键盘上的按键被用户抬起的时候执行


        // 4. 用户输入事件类型      当用户在输入框中输入内容的时候
        // input


        // 5. load 事件     网页中所有资源全部加载完成后,程序才会执行 load 事件
        // load


        // 6. 滚动事件      用户在网页中拖拽滚动条触发的事件 (必须有滚动条, 滚动事件才会执行)
        // scroll


        // 7. 提交事件
        // submit










        // 代码演示:
        let btn = document.querySelector('.btn');
        btn.addEventListener('click', function(){
            alert('大家好');
        });





        // C. 移除事件

        // 1. 针对标签注册事件的时候通过 DOML0 方式 注册的 (移除 DOML0 事件)
        // 语法:
        // ☛   事件源.on事件类型 = null;

        // 代码演示:
        let ary = document.querySelector('input');
        ary.onclick = function(){
            alert(123);
        }
        // 移除事件
        ary.onclick = null;


        // 2. 针对标签注册事件的时候通过 DOMl2 注册的 (移除 DOML2 事件)
        // 语法:
        // ☛   事件源.removeEventListener('事件类型', 具名函数);

        // 代码演示:
        function fn() {
            alert(123);
        }
        let res = document.querySelector('.res');
        res.addEventListener('click', fn);
        // 移除 res 按钮身上的点击事件
        res.removeEventListener('click', fn);


    </script>
</body>
</html>